<template>
	<view style="width: 100%;height: 100%;">
		<map scale="14" id="map" style="width: 100%; height: 100%;" :latitude="latitude" :enable-satellite="true"
			:longitude="longitude" :markers="markers" @regionchange="getCenterMap" @labeltap="labeltap" :polygons="polygons"
			:enable-poi="true">
		</map>
	</view>
</template>

<script>
	var that;
	export default {
		data() {

			return {
				polygons:[],
				markers: [],
				schoolDistrictJSON: {},
				latitude: 0.0,
				longitude: 0.0
			}
		},
		onLoad() {
			that = this;
			that.latitude = 37.43729;
			that.longitude = 116.353118;
			that.schoolDistrict();
		},
		methods: {

			labeltap(e) {
				console.log(e);
				that.polygons = [];
				//markerId =e.detail 
				var points=[];
				if(that.schoolDistrictJSON[e.detail.markerId].positioning_point.length>0){
					for(var i=0;i<that.schoolDistrictJSON[e.detail.markerId].positioning_point.length;i++){
						points.push({latitude:that.schoolDistrictJSON[e.detail.markerId].positioning_point[i][1],
						longitude:that.schoolDistrictJSON[e.detail.markerId].positioning_point[i][0]});
					}
					
				}
				// points=[{latitude:'37.47751',longitude:'116.32017'},
				// {latitude:'37.46916',longitude:'116.31815'},
				// {latitude:'37.46294',longitude:'116.32203'},
				// {latitude:'37.46855',longitude:'116.32172'}]
				// console.log("points===",points)		
				that.polygons.push({
					points: points,
					strokeWidth: 2,
					strokeColor: '#d54444',
					fillColor: '#f75c417c'
				})
			},
			getCenterMap() {

			},
			schoolDistrict() {
				var url = uni.api.API.schoolDistrict;
				var parm = {

				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.schoolDistrictSuss,
					that.schoolDistrictFail, 1);
			},
			schoolDistrictSuss(res) {
			
				that.schoolDistrictJSON = res.data;
					console.log(that.schoolDistrictJSON)
				if (that.schoolDistrictJSON != undefined && that.schoolDistrictJSON.length > 0) {
					for (var i = 0; i < that.schoolDistrictJSON.length; i++) {
						that.markers.push({
							alpha: 0,
							height: 0,
							id: i,
							latitude: that.schoolDistrictJSON[i].latitude,
							longitude: that.schoolDistrictJSON[i].longitude,
							width: 0,
							label: {
								content: that.schoolDistrictJSON[i].title,
								color: '#fff',
								fontSize: 15,
								borderRadius: 5,
								bgColor: '#fa8072',
								padding: 5,
								textAlign: 'center'
							}

						});
					}
				}
			},
			schoolDistrictFail(msg) {
				console.log(msg);
			}
		}
	}
</script>

<style>

</style>